<template>
	<view class="container exc-container">
		<image class="bg-img" :src="$fileUrl+'exc-bg.png'" mode="widthFix"></image>
		<view class="date-panel">
			<view class="date-title">{{monthStr}}月已累计签到<text style="color:#3AD3C1; margin: 0 18rpx;">{{pageData.monthSignDays}}</text>天</view>
			<view>
				<view class="date-list" :class="pageData.dayArr.indexOf(item)>=0&&'date-sel'" v-for="(item,idx) in mouthDay"
					:key="'month_'+idx">
					<view class="date-num">{{item}}</view>
					<view class="iconfont" v-if="pageData.dayArr.indexOf(item)>=0">&#xe648;</view>
					<view class="data-words" v-else>待签到</view>
				</view>
			</view>
			<view class="yuan-btn btn-primary sign-btn" v-if="pageData.todaySigned===true">今日已签到</view>
			<view class="yuan-btn btn-primary sign-btn" @click="clickSign" v-else>点击签到</view>
			
			<view class="share-btn">
				<text>邀请得积分</text>
				<button class="share-btn-child" open-type="share">邀请得积分</button>
			</view>
			
		</view>
		<view class="bottom-tips">
			<view class="bottom-title">签到规则</view>
			<view class="bottom-list">1.每日签到，由系统概率发放各类优惠劵积分奖励。</view>
			<view class="bottom-list">2.连续签到，可获取连续签到天数+1点的积分奖励，每日最高获取10点签到积分。</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { onShow } from "@dcloudio/uni-app"
import { hideLoading, showLoading, showToast } from '../../common/util';
import userApi from '../../common/userApi';
	let mouthDay = ref(0)
	let monthStr = ref(1)
	onShow(() => {
		const now = new Date();
		const year = now.getFullYear();
		const month = now.getMonth();
		monthStr.value = month+1
		mouthDay.value = new Date(year, month + 1, 0).getDate()
	})
	onMounted(()=>{
		getPageData()
	})
	const pageData=ref<any>({
		dayArr:[]
	})
	const getPageData=async ()=>{
		showLoading()
		try {
			const res = await userApi.getSignCalendar()
			const data=res.data
			data.dayArr=data.signedDates.map((item)=>{
				return Number(item.split('-')[2])
			})
			pageData.value=res.data
			
		} finally {
			hideLoading()
		}
	}
	const clickSign=async ()=>{
		showLoading()
		try {
			const res = await userApi.userSign()
			showToast('签到成功', {}, () => {
				getPageData()
			})
		} finally {
			hideLoading()
		}
	}
</script>

<style lang="scss">
	.exc-container {
		background: linear-gradient(180deg, #DAFBFB 0%, #D7E5FF 8%, #F2F3F8 40%, #F2F3F8 100%);
		position: relative;
		padding: 25rpx;
		padding-top: 320rpx;
		padding-bottom: 120rpx;
		z-index: 1;

		.bg-img {
			position: absolute;
			top: 60rpx;
			left: 0;
			width: 100%;
			z-index: -1;
		}

		.date-panel {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0,0,0,0.1);
		}

		.date-title {
			font-weight: bold;
			font-size: 40rpx;
			color: #202020;
			padding-bottom: 20rpx;
		}

		.date-list {
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			width: 74rpx;
			height: 90rpx;
			border-radius: 10rpx;
			background-color: rgba(58, 211, 193, 0.15);
			margin-right: 22rpx;
			margin-bottom: 22rpx;
			padding: 10rpx 0;

			.iconfont {
				color: #fff;
				font-size: 26rpx;
			}
		}

		.date-list:nth-child(7n) {
			margin-right: 0;
		}

		.date-num {
			color: #202020;
			font-size: 26rpx;
		}

		.data-words {
			font-size: 24rpx;
			color: #129C8F;
			transform: scale(0.7);
		}

		.date-sel {
			background-color: rgba(58, 211, 193, 1);

			.date-title {
				color: #fff;
			}
		}
		
		.sign-btn{
			height: 74rpx;
			width: 520rpx;
			margin: 0 auto;
			border-radius: 70rpx;
			font-size: 30rpx;
			margin-top: 30rpx;
		}
		.share-btn{
			margin: 0 auto;
			margin-top: 30rpx;
			padding-bottom: 20rpx;
			text-align: center;
			font-size: 30rpx;
			position: relative;
		}
		.share-btn-child{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
		}
		
		.bottom-tips{
			margin-top: 30rpx;
		}
		.bottom-title{
			font-size: 24rpx;
			color: #202020;
			font-weight: bold;
		}
		.bottom-list{
			font-size: 24rpx;
			color: #6D6D6D;
			margin-top: 15rpx;
			letter-spacing: 1px;
		}
	}
</style>